<template>
  <div>
    <span >授权区域限制 </span>
    <el-select v-model="selectValue.restrictArea" placeholder="请选择" @change="(val)=>{ getContent(val,'1')}" style="width: 30%;">
      <el-option
        v-for="item in area"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="selectValue.areaId" placeholder="请选择" @change="(val)=>{ getContent(val,'2')}">
      <el-option
        v-for="item in area2"
        :key="item.id"
        :label="item.companyName || item.platformName"
        :value="item.id">
      </el-option>
    </el-select>

  </div>
</template>

<script>
  export default {
    name: "selectVo",
    data() {
      return {
        areaData:[],
        selectValue: {
          restrictArea: '',
          areaId: ''
        },
        area: [{
          value: 'A',
          label: '我司'
        },
          {
            value: 'B',
            label: '平台'
          }, {
            value: 'C',
            label: '合作公司'
          }],
        area2: [],
      }
    }, created(){
       this.getArea()
    },

    methods: {
      //获取区域限制
      getArea() {
        let success = data => {
          if (data.statusCode === "1") {
            this.area2 = data.body
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.restrictionArea({}, success)
      },
      getContent(val, type) {
        console.log(val,type)
        if (type === '1') {
          //todo 获取后台接口返回，赋值area2
          this.val = val;
          for (let key in this.area2) {
            if (key == val) {
              this.area2 = this.area2[key]
            }
          }
          this.selectValue.restrictArea = val;
        }else{
          this.selectValue.areaId = val;
        }

        this.returnValues();
      },
      returnValues() {
        this.$emit("returnValue", this.selectValue)
      }
    }
  }
</script>

<style scoped>

</style>
